<template>
    <view>
        <view class="detailStore">
            <view class="shop-message">
                <view class="shop-lt">
                    <image v-if="memberList.headPicture" mode="aspectFill" class="lt-profile" :src="memberList.headPicture"></image>
                    <image class="lt-profile" mode="aspectFill" v-else src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/profile-hai.png"></image>
                    <view class="lt-name">
                        <view class="lt-namess">
                            <view class="userNameaa">{{ memberDetail.userName }}</view>
                        </view>
                        <view class="lt-phone">{{ memberDetail.mobile }}</view>
                    </view>
                </view>
                <view class="division"></view>
                <view class="shop-rl">
                    <view class="rl-vipbox">
                        <view class="rl-remaining">购买套餐：{{ memberDetail.orderName }}</view>
                    </view>
                    <view class="rl-vipbox">
                        <view class="rl-remaining">服务人员：{{ memberDetail.nickname }}</view>
                    </view>
                </view>
            </view>
        </view>

        <view class="flexbox-max">
            <view class="flexbox-title">
                <view class="title-box">
                    <view class="align-end"></view>
                    <view class="centers">
                        <text class="zhtitle">评价内容</text>
                    </view>
                </view>
                <view class="centers">
                    <text class="comment-time">评价时间：{{ memberDetail.createtime }}</text>
                </view>
            </view>
            <view class="comment">
                <view class="flexbox-sb mt-40">
                    <view class="centers">
                        <text class="zhtitle">店铺评价</text>
                        <view :data-index="index" @tap="onChange" data-type="1" v-for="(item, index) in namelist" :key="index">
                            <image class="icon-28 mr-50" :src="serverindex <= index ? item.icon : item.icon1"></image>
                        </view>
                    </view>
                    <view class="text-1">{{ serverindex }}星</view>
                </view>
                <view class="flexbox-sb mt-40">
                    <view class="centers">
                        <text class="zhtitle">理发效果</text>
                        <view :data-index="index" @tap="onChange" data-type="2" v-for="(item, index) in namelist" :key="index">
                            <image class="icon-28 mr-50" :src="serverindex2 <= index ? item.icon : item.icon1"></image>
                        </view>
                    </view>
                    <view class="text-1">{{ serverindex2 }}星</view>
                </view>
                <view class="flexbox-sb mt-40">
                    <view class="centers">
                        <text class="zhtitle">理发环境</text>
                        <view :data-index="index" @tap="onChange" data-type="3" v-for="(item, index) in namelist" :key="index">
                            <image class="icon-28 mr-50" :src="serverindex3 <= index ? item.icon : item.icon1"></image>
                        </view>
                    </view>
                    <view class="text-1">{{ serverindex3 }}星</view>
                </view>
                <view class="flexbox-sb mt-40">
                    <view class="centers">
                        <text class="zhtitle">整体服务</text>
                        <view :data-index="index" @tap="onChange" data-type="4" v-for="(item, index) in namelist" :key="index">
                            <image class="icon-28 mr-50" :src="serverindex4 <= index ? item.icon : item.icon1"></image>
                        </view>
                    </view>
                    <view class="text-1">{{ serverindex4 }}星</view>
                </view>
                <view class="flexbox-sb mt-40">
                    <view class="centers">
                        <text class="zhtitle">理发师评分</text>
                        <view :data-index="index" @tap="onChange" data-type="5" v-for="(item, index) in namelist" :key="index">
                            <image class="icon-28 mr-50" :src="serverindex5 <= index ? item.icon : item.icon1"></image>
                        </view>
                    </view>
                    <view class="text-1">{{ serverindex5 }}星</view>
                </view>
                <view class="box" v-if="type === 'add' || (type === 'info' && evatext)">
                    <textarea
                        maxlength="170"
                        :disabled="type === 'info'"
                        :value="evatext"
                        @input="bindTextAreaBlur"
                        class="textarea"
                        placeholder="请写下其他的巡检记录，有利于门店老板更好管理"
                        name="textarea"
                    ></textarea>
                    <text class="text" v-if="type === 'add'">最多170字哦</text>
                </view>
                <view class="mt-30" v-if="type === 'add'">
                    <van-uploader
                        max-count="6"
                        :file-list="fileList"
                        :deletable="true"
                        preview-size="120rpx"
                        @after-read="afterRead"
                        upload-icon="https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/take.png"
                        @delete="ondelete"
                        upload-text="添加照片"
                    ></van-uploader>
                </view>
                <view class="text1" v-if="type === 'add'">{{ fileList.length }}/6</view>
                <view class="mt-30" v-if="type === 'info'">
                    <image :class="'img_box ' + (index !== 0 && index !== 4 ? 'img_active' : '')" :src="item" mode="" v-for="(item, index) in imgList" :key="index"></image>
                </view>
            </view>
        </view>
        <view class="Evaluation-conter">
            <view class="Evaluation-title">评价内容：{{ memberDetail.describe }}</view>
        </view>
        <view class="girlbox">
            <image class="girl" :src="item" v-for="(item, index) in memberDetail.imgs" :key="index"></image>
        </view>
        <view class="frommerchant">商家回复：{{ memberDetail.reply }}</view>
    </view>
</template>

<script>
// pagesc/detailsevaluation/index.js
const app = getApp(); // 引入app

const _request = require('../../utils/request.js'); // 引入require;

const { isNull } = require('../../utils/util.js');

export default {
    data() {
        return {
            nameindex: -1,
            shopindex: 4,
            serverindex: 4,
            serverindex2: 4,
            serverindex3: 4,
            serverindex4: 4,
            serverindex5: 4,
            fileList: [],
            urlimg3: '',
            orderId: '',
            evatext: '',

            namelist: [
                {
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/shopstar.png',
                    icon1: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/clip2.png'
                },
                {
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/shopstar.png',
                    icon1: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/clip2.png'
                },
                {
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/shopstar.png',
                    icon1: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/clip2.png'
                },
                {
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/shopstar.png',
                    icon1: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/clip2.png'
                },
                {
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/shopstar.png',
                    icon1: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/clip2.png'
                }
            ],

            memberList: {
                userName: '小新',
                mobile: '15012768886',
                headPicture: ''
            },

            memberDetail: [],
            type: '',
            imgList: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        console.log(options, 11);
        this.getDetail(options.scoreId);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        // 页面加载进来，显示数据
        getDetail(e) {
            let userId = uni.getStorageSync('userId');
            let storeId = uni.getStorageSync('storeId');

            _request
                .get('/storeManage/getStoreScoreInfo', {
                    userId: userId,
                    storeId: storeId,
                    scoreId: e
                })
                .then((res) => {
                    console.log(res.data.data);

                    if (res.data.code == '200') {
                        this.setData({
                            memberDetail: res.data.data,
                            serverindex: res.data.data.population,
                            serverindex2: res.data.data.effect,
                            serverindex3: res.data.data.environment,
                            serverindex4: res.data.data.attitude,
                            serverindex5: res.data.data.stylist // serverindex5:res.data.data.stylist,
                        });
                        console.log(this.memberDetail);
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });

            console.log(this.memberDetail);
        },

        onChange() {
            console.log('占位：函数 onChange 未声明');
        },

        bindTextAreaBlur() {
            console.log('占位：函数 bindTextAreaBlur 未声明');
        },

        afterRead() {
            console.log('占位：函数 afterRead 未声明');
        },

        ondelete() {
            console.log('占位：函数 ondelete 未声明');
        }
    }
};
</script>
<style>
/* pagesc/detailsevaluation/index.wxss */
page {
    background-color: #fff;
}
.detailStore {
    padding: 40rpx;
    box-sizing: border-box;
}
.shop-message {
    height: 140rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(242, 93, 3, 0.16);
    border-radius: 10rpx;
    display: flex;
    align-items: center;
}
.division {
    width: 1rpx;
    height: 100rpx;
    background: linear-gradient(0deg, #ffffff, #e94a18, #ffffff);
}
.shop-lt {
    flex: 1;
    height: 80rpx;

    display: flex;
}

.lt-profile {
    width: 80rpx;
    height: 80rpx;
    /* background: linear-gradient(0deg, #F1AA14 0%, #FB7099 100%); */
    border: 2rpx solid #ffffff;
    border-radius: 50%;
    margin-left: 20rpx;
}

.lt-name {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-left: 13rpx;
}

.userNameaa {
    width: 180rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lt-namess {
    display: flex;
    align-items: center;
}

.lt-shopvip {
    height: 32rpx;
    background-color: rgba(233, 74, 24, 0.1);
    border-radius: 4rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
    padding: 0rpx 10rpx;
    margin-left: 10rpx;
}

.girl2 {
    width: 100rpx;
    height: 100rpx;
    margin-right: 29rpx;
    border-radius: 50%;
}

.recharge-text {
    width: 176rpx;
    text-align: right;
    display: flex;
}

.recharge-text2 {
    width: 176rpx;
    text-align: right;
}

.lt-phone {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}

.shop-rl {
    flex: 1;
    height: 80rpx;
}

.rl-vip {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}

.rl-remaining {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}

.rl-vipbox {
    margin-left: 28rpx;
}

.replace {
    width: 54rpx;
    height: 54rpx;
    margin-right: 15rpx;
}

.type-cardbox {
    width: 100%;
    height: 200rpx;
    background: #ffffff;
    box-shadow: 0rpx 8rpx 10rpx 0rpx rgba(233, 74, 24, 0.1);
    border-radius: 10rpx;
    margin-top: 30rpx;
}

.shopcard-title {
    width: 100%;
    height: 71rpx;
    line-height: 71rpx;
    background-size: 100% 100%;
    background-image: url('https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/shopcard_title3.png');
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.title2-name {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #883d01;
    margin-left: 21rpx;
    width: 560rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cicard {
    width: 82rpx;
    height: 45rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    text-align: center;
    background-image: url('https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/ci-card.png');
    background-size: 100% 100%;
    line-height: 36rpx;
}

.cicard-info {
    height: 120rpx;
    display: flex;
    align-items: center;
}

.cicard-infoconter {
    height: 66rpx;
    margin-left: 20rpx;
    width: 100%;
}

.cards-name {
    width: 700rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cards-bt {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bt-time {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
}

.frequency {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
    margin-right: 20rpx;
}

.base-box {
    width: 100%;
    height: 200rpx;
}

.base-box2 {
    display: flex;
}

.reportstore-box {
    width: 100%;
    /* height: 410rpx; */
    border-bottom: 20rpx solid #f1f1f1;
    /* padding: 20rpx 0; */
}

.reportstore-max {
    padding: 20rpx 40rpx;
    /* height: 320rpx; */
}

.align-end {
    width: 8rpx;
    height: 8rpx;
    background: #e94a18;
    border-radius: 50%;
    margin-right: 10rpx;
}

.reportstore-title {
    height: 100rpx;
    display: flex;
    align-items: center;
    line-height: 100rpx;
    border-bottom: 1rpx solid #e5e5e5;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}

.reportstore-name {
    width: 662rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    margin-top: 10rpx;
    line-height: 50rpx;
}

/* pages/comment/index.wxss */
.page {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* 地点 */
.name {
    width: 710rpx;
    height: 180rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    padding: 30rpx 40rpx;
    box-sizing: border-box;
}

.centers {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0rpx;
}

.title {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
}

.zhtitle {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 40rpx;
    width: 160rpx;
    margin-right: 40rpx;
}

/* 评价 */
.comment {
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    padding: 0rpx 40rpx;
    box-sizing: border-box;
    position: relative;
}

.box {
    position: relative;
}

.hrs {
    margin: 22rpx 0 30rpx 0;
}

.textarea {
    width: 670rpx;
    height: 200rpx;
    background: #fbfbfb;
    padding: 20rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    padding-bottom: 40rpx;
}

.text {
    height: 28rpx;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 28rpx;
    position: absolute;
    bottom: 10rpx;
    right: 20rpx;
    z-index: 1;
}

.text-1 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
}

/* 发布按钮 */
.btn {
    margin: 80rpx auto;
    width: 670rpx;
    height: 84rpx;
    background: #e94a18;
    border-radius: 21px;
    text-align: center;
    line-height: 84rpx;
    color: white;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
}

.mr-30 {
    margin-right: 45rpx;
}

.mr-50 {
    margin-right: 40rpx !important;
}

.mt-30 {
    margin-top: 45rpx;
}

.bot {
    width: 750rpx;
    height: 1rpx;
}

.text1 {
    height: 28rpx;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 28rpx;
    position: absolute;
    bottom: 50rpx;
    right: 50rpx;
    z-index: 1;
}

.flexbox-sb {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
}

.title-box {
    display: flex;
    align-items: center;
}

.comment-time {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
}

.flexbox-title {
    padding: 0rpx 40rpx;
    justify-content: space-between;
    height: 100rpx;
    line-height: 100rpx;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-bottom: 1rpx solid #e5e5e5;
}

.flexbox-max {
    background-color: #fff;
    border-top: 20rpx solid #f1f1f1;
    margin-bottom: 60rpx;
}

.frommerchant {
    border-top: 1rpx solid #e5e5e5;
    margin: 0 40rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
    padding: 30rpx 0;
}

.girl {
    width: 110rpx;
    height: 110rpx;
    margin-right: 30rpx;
    margin-bottom: 30rpx;
    border-radius: 10rpx;
}

.girlbox {
    display: flex;
    flex-wrap: wrap;
    padding: 0 40rpx;
}

.Evaluation-title {
    line-height: 45rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin: 40rpx 0 45rpx 0;
}

.Evaluation-conter {
    border-top: 1rpx solid #e5e5e5;
    padding: 0 40rpx;
}

.img_box {
    width: 123rpx;
    height: 123rpx;
}

.img_active {
    margin-left: 59rpx;
}

.xin {
    color: rgba(233, 74, 24, 1);
}
</style>
